import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { AppGlobalService } from '../../shared/service/app-global.service';
import { IonSlides } from '@ionic/angular';
import { PageModalService } from "../../shared/service/page-modal-service";
import { ModalController } from "@ionic/angular";
import { ImgSlidePage } from "../slides-imgage/img-slide.page";

@Component({
  selector: 'app-advertise-play',
  templateUrl: './advertise-play.component.html',
  styleUrls: ['./advertise-play.component.scss'],
})
export class AdvertisePlayComponent implements OnInit {

  @ViewChild('slideImg') slides: IonSlides;
  @Input() tagData: any;
  // tagData: any = { images: [], style: {} };
  slideOpts: any;
  idx: any = 1;
  cssStr: any = {};
  images: any;
  showSlider = true;
  settings: any;
  constructor(
    private appGlobalService: AppGlobalService,
    private pageModalService: PageModalService,
    public modalController: ModalController
  ) { }
  // ion-slides 触发轻敲事件
  clickImg() {
    // console.log(this.slides.realIndex);
    const index = this.slides.getActiveIndex();
    this.slides.getActiveIndex().then(index => {
      const leng = this.tagData.data.data.length;
      if (index > leng) {
        index = index - leng - 1;
      } else if (index === 0) {
        index = leng - 1; // 第0张是最后一张图片
      } else {
        index--;
      }
      console.log(index);
      if (this.tagData.data.data[index].image) {
        this.clickLink(this.tagData.data.data[index].link);
      } else {
        this.previewImage(this.tagData.data.data[index], index, true);
      }
    });
  }

  ngOnInit() {

    if (this.tagData.style === 'appGeneralmanageFormTag') {
      if (this.tagData.data.data && this.tagData.data.data.length > 0 && this.tagData.data.data[0] && this.tagData.data.data[0].settings) {
        this.settings = this.tagData.data.data[0].settings;
        
      }
    }
    if (this.tagData.data && this.tagData.data.data && this.tagData.data.data.length === 1) {
      if (this.settings) {
        this.settings.showSlider = false;
      }
    }

    let delay;
    if (this.tagData.data.data && this.tagData.data.data.length > 0) {
      delay = this.tagData.data.data[0].delay ? this.tagData.data.data[0].delay : 300000000;
    }
    // let auto = this.tagData.data.autoPlay === 'true' ? true : this.tagData.data.settings.autoPlay;
    this.slideOpts = {
      initialSlide: 0,
      slidesPerView: 1,
      autoplay: {
        delay: delay || 3000,
      },
      speed: 400,
      // loop: this.tagData.data.data.length > 1 ? true : false,
    }
    if (this.tagData.data && this.tagData.data.data && this.tagData.data.data.length > 1) {
      this.slideOpts.loop = true
    } else {
      this.slideOpts.loop = false
    }
  }

  slidesDidLoad(slides: IonSlides) {
    const that = this;
    slides.startAutoplay();
    slides.getActiveIndex().then(index => {
      that.idx = index;
    });
  }

  getprevIndex() {
    this.idx -= 1;
  }

  getnextIndex() {
    this.idx += 1;
  }

  getIndex(slides: IonSlides) {
    const that = this;
    slides.getActiveIndex().then(index => {
      that.idx = index;
      if (that.idx <= that.tagData.data.data.length) {
        if (that.idx === 0) {
          that.idx = that.tagData.data.data.length;
        } else {
          that.idx = index;
        }
      } else {
        that.idx = 1;
      }
    })
  }
  clickLink(obj) {
    if (!obj) {
      console.log('没有返回link-target');
    }
    if (obj && obj.type !== 'url') {
      const pageParams = {
        pageId: obj.target,
        params: obj.params,
        sessionId: localStorage.getItem('sessionId')
      };
      this.appGlobalService.goToForward(pageParams);
    } else {
      // 跳转外链
      // window.location.href = obj.target
      this.appGlobalService.openUrl(null, obj.target);
    }
  }

  async previewImage(imageUrl, tmpIndex, isPreview) {
    if (isPreview && isPreview !== undefined) {
      // const that = this;
      let tempImageUrl = 'assets/img/default_img.png';
      if (imageUrl !== undefined) {
        if (imageUrl.video) {
          imageUrl.link.modalCss = 'video-modal';
          this.pageModalService.openPage(imageUrl.link);
          return;
        }
        tempImageUrl = imageUrl;
      }
      const value = { img: [tempImageUrl], index: tmpIndex };
      const modal = await this.modalController.create({
        component: ImgSlidePage,
        componentProps: { value: JSON.stringify(value) }
      });
      return await modal.present();
    }
  }
}
